<template>
    <div class="team">
        <div>
        <el-page-header :icon="ArrowLeft" @back="onBack">
            <template #content>
                <div class="flex items-center">
                    <el-avatar
                    :size="32"
                    class="mr-3"
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                    />                                
                </div>
                </template>
               
        </el-page-header>
    </div>
        <div class="lef">
            <el-card class="bc">
                <el-scrollbar height="400px" >
                    <chat :message="message" v-if="message"></chat>
                    <span> </span>
                </el-scrollbar>
                <div class="message">
                    <el-input v-model="input.text" placeholder="Please input" clearable />
                </div>
                <el-button type="primary" @click="send">send</el-button>
            </el-card>
        </div>
        <div class="righ">
            <el-card class="rc">
                <div v-for="o in 4" :key="o" style="margin-bottom: 10px;">
                    <el-avatar :size="50" :src="circleUrl" /> 小狼 在线 
                </div>
            </el-card>
        </div>
    </div>

</template>
<script>
import chat from '../components/chat.vue'
export default{
    data(){
        return{
            circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
            input:{name:"小狼",to:'小樱',text:'',time:''},
            message:'',
            socket:'',
            contant:''
        }
    },
    methods:{
        //返回s
        onBack(){

        },
        chat(message){
           var name= message.name;
           var text= message.text;
           if(name==this.name){

           }
        },
        init(){   
          var socket= new WebSocket('ws://localhost:8080/websocket/123');  
          this.socket=socket;   
            socket.onmessage = function (event) {
                // console.log(event);//服务器发送的消息
                // this.message=event.data
                this.message=JSON.parse(event.data);
                console.log(this.message);
            }
            socket.onopen = function (event) {
                console.log("开启连接");
            }
            socket.onclose = function (event) {
                console.log("连接关闭")
           
            }
            socket.onerror=function(){
                console.log("连接发生错误");
            }       
        }
       ,
       send(){
            if (!window.WebSocket) {
            return
            }
            if (this.socket.readyState == WebSocket.OPEN) {
              var msg=  JSON.stringify(this.input);
            //   console.log(msg);
           this.socket.send(msg)
            } else {
            alert("连接没有开启.")
            }
      }

    },
    beforeMount(){
        if ('WebSocket' in window) {
        // this.websocket = new WebSocket('ws://localhost:8080/websocket/123');
        this.init();
      } else {
        alert('当前浏览器 Not support websocket')
      }
       
    },
    components:{
        chat
    }
}
</script>
<style>
*{
    margin: 0px;
    padding: 0px;
}
.team{
    width: 100%;
    height: 750px;
    background-image: url(src/assets/761506.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    
}
.lef{
    float: left;
    margin-left: 200px;
    margin-top: 70px;
   
}
.bc{
    width: 750px;
    height: 600px;
    border-radius: 25px;
}
.righ{
    margin-left: 100px;
    margin-top: 70px;
    
    float: left;
}
.rc{
    width: 250px;
}
.message{
    margin-top: 50px;
}

.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
 
  text-align: center;
  border-radius: 4px;
  
  color: var(--el-color-primary);
}

</style>